Angular Events
Events உங்கள் template-கு user actions-கு react செய்ய அனுமதிக்கின்றன.
Event Binding Essentials
(event) மூலம் bind செய்து ஒரு component method-ஐ run செய்யவும்; $event என்பது native Event ஆகும்.
Common DOM events பயன்படுத்தவும்: (click), (input), மற்றும் key filters போன்ற (keyup.enter).
Fast input-ல் work limit செய்ய debounce handlers பயன்படுத்தவும்.
Bubbling: Child events மேலே bubble செய்யும்; தேவைப்படும் போது $event.stopPropagation() call செய்யவும்.
Event Binding Examples
<button (click)="onClick()">Click</button>
<input (input)="onInput($event)" (keyup.enter)="submit()">
<div (click)="onParentClick()">
<button (click)="onChildClick($event)">Child</button>
</div>Note
Templates for markup and interpolation, Data Binding for property/two-way binding, and Conditional Rendering for showing/hiding content ஆகியவற்றை காணவும்.
Basic Events
Component state update செய்ய (click) handle செய்யவும்.
Input values-ஐ $event.target இலிருந்து read செய்யவும் (தேவைப்படும் போது cast அல்லது $any பயன்படுத்தவும்).
கடைசி key pressed-ஐ (keyup) மூலம் track செய்யவும்.
Basic Event Examples
<button (click)="increment()">Click me</button>
<input (input)="onInput($event)" (keyup)="lastKey = $any($event).key">Example
Common events handle செய்து component state-ஐ user input-ல் sync-ல் வைக்கவும்:
Events Example
import { bootstrapApplication } from '@angular/platform-browser';
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
standalone: true,
template: `
<h3>Events</h3>
<p>Count: {{ count }}</p>
<button (click)="increment()">Click me</button>
<div style="margin-top:12px">
<input placeholder="Type..." (input)="onInput($event)"
(keyup)="lastKey = $any($event).key">
<p>Value: {{ value }}</p>
<p>Last key: {{ lastKey }}</p>
</div>
`
})
export class App {
count = 0;
value = '';
lastKey = '';
increment() { this.count++; }
onInput(e: Event) { this.value = (e.target as HTMLInputElement).value; }
}
bootstrapApplication(App);Example Explained
- (click)="increment()": Count increase செய்ய component method-ஐ call செய்கிறது.
- (input)="onInput($event)": Input-ன் current text-ஐ $event.target.value இலிருந்து read செய்து value-ல் store செய்கிறது.
- (keyup)="lastKey = $any($event).key": கடைசி pressed key-ஐ lastKey-ல் store செய்கிறது.
- Display: {{ count }}, {{ value }}, மற்றும் {{ lastKey }} component fields-ஐ show செய்கின்றன.
Notes
- Keep handlers small: Event handlers-ல் minimal work செய்யவும்; heavy work-ஐ services-க்கு delegate செய்யவும்.
- Type the event: $event-ஐ narrow செய்யவும் அல்லது inputs read செய்யும் போது $any($event.target) பயன்படுத்தவும்.
- Propagation/default: தேவைப்படும் போது $event.stopPropagation() / $event.preventDefault() பயன்படுத்தவும்.
Event Filtering (keyup.enter)
Specific keys (e.g., Enter) மட்டுமே handlers run செய்ய key aliases பயன்படுத்தவும்.
Filtered events-ல் state update செய்வதன் மூலம் UI-ஐ reactive-காக வைக்கவும்.
Key Filter Example
<input (keyup.enter)="add()" (keyup)="lastKey = $any($event).key">Example
Key aliases போன்ற keyup.enter உடன் keyboard events filter செய்யவும்:
Event Filtering Example
import { bootstrapApplication } from '@angular/platform-browser';
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
@Component({
selector: 'app-root',
standalone: true,
imports: [CommonModule],
styles: [`
.toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
ul { margin-top: 10px; }
li { line-height: 1.8; }
input[type="text"] { padding: 6px 8px; }
`],
template: `
<h3>Event Filtering (keyup.enter)</h3>
<div class="toolbar">
<input type="text" placeholder="Add item and press Enter"
[value]="draft"
(input)="draft = $any($event.target).value"
(keyup)="lastKey = $any($event).key"
(keyup.enter)="add()">
<button (click)="add()">Add</button>
<button (click)="clear()" [disabled]="items.length === 0">Clear</button>
<span style="margin-left:8px;color:#666">Last key: {{ lastKey }}</span>
</div>
<ul>
<li *ngFor="let it of items; let i = index">{{ i + 1 }}. {{ it }}</li>
</ul>
`
})
export class App {
draft = '';
lastKey = '';
items = ['Buy milk', 'Learn Angular'];
add() {
const v = (this.draft || '').trim();
if (!v) return;
this.items = [...this.items, v];
this.draft = '';
}
clear() { this.items = []; }
}
bootstrapApplication(App);Example Explained
- (keyup.enter)="add()": Enter key pressed ஆகும் போது மட்டும் run செய்கிறது, current draft-ஐ add செய்கிறது.
- [value]="draft"/(input): Input element மற்றும் draft field-ஐ sync-ல் வைக்கிறது.
- List: New items immutably append செய்யப்பட்டு *ngFor மூலம் render செய்யப்படுகின்றன; lastKey கடைசி pressed key-ஐ show செய்கிறது.
- Buttons: "Add" மற்றும் "Clear" list state update செய்ய component methods-ஐ call செய்கின்றன.
Notes
- Use key aliases: Key codes manually check செய்வதற்கு பதிலாக (keyup.enter) பயன்படுத்தவும்.
- Immutable updates: Change detection predictable-காக new array references (e.g., spread) உடன் items add/remove செய்யவும்.
Debounced Input
Excessive work avoid செய்ய typing pauses வரை updates-ஐ delay செய்யவும்.
Input changes debounce செய்ய setTimeout அல்லது RxJS பயன்படுத்தவும்.
Debounce Pseudo Code
// Pseudo
handle: any;
onInput(e) {
clearTimeout(handle);
handle = setTimeout(() => doWork(e), 400);
}Example
Fast typing-ல் work reduce செய்ய user input-ஐ debounce செய்யவும்:
Debounced Input Example
import { bootstrapApplication } from '@angular/platform-browser';
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
standalone: true,
template: `
<h3>Debounced Input</h3>
<input type="text" placeholder="Type here" (input)="onInput($event)">
<p>Immediate: {{ immediate }}</p>
<p>Debounced (400ms): {{ debounced }}</p>
`
})
export class App {
immediate = '';
debounced = '';
private handle: any;
onInput(e: Event) {
const v = (e.target as HTMLInputElement)?.value ?? '';
this.immediate = v;
clearTimeout(this.handle);
this.handle = setTimeout(() => this.debounced = v, 400);
}
}
bootstrapApplication(App);Example Explained
- Immediate vs debounced: Immediate ஒவ்வொரு input-லும் update செய்கிறது; debounced no typing-ன் 400ms க்கு பிறகு update செய்கிறது.
- onInput(e): e.target.value-ஐ read செய்கிறது, immediate-ஐ set செய்கிறது, pending timer-ஐ clear செய்கிறது, மற்றும் debounced set செய்ய new timeout schedule செய்கிறது.
- Timer handle: Handle timeout ID-ஐ store செய்கிறது அதனால் அது அடுத்த keystroke-ல் cleared ஆக முடியும்.
Notes
- Cleanup timers: Stale updates avoid செய்ய ஒவ்வொரு input-லும் pending timers clear செய்யவும்.
- Right delay: UX-க்கு fit ஆகும் debounce-ஐ தேர்ந்தெடுக்கவும் (e.g., 300-500ms).
- Advanced cases: Streams-க்கு, RxJS consider செய்யவும்.